<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>计数器</title>
</head>

<body>
    <div id="app">
        <h2>当前计数： {{counter}}</h2>
        <button type="button" name="increment" v-on:click='increment'>+</button>
        <button type="button" name="decrement" @click='decrement'>-</button>
    </div>
</body>
<script src="../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increment: function() {
                this.counter++;
                console.debug("自增方法调用");
            },
            decrement() {
                this.counter--;
                console.debug("自减方法调用");
            }
        },

        // 生命周期回调
        beforeUpdate: function() {
            console.trace('数据变更');
        }
    });
</script>

</html>
